<template>
    <div class="swiper-container" ref="cur">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item) in homework" :key="item.id">
          <div class="swiperBg" :style="{ backgroundColor: item.bgColor }"></div>
          <!-- 加入 的 -->
          <div class="swiper-item" >
          <div class="swiper-box">
            <div class="swiper-left">
              <h3  :style="{ color: item.text_color }">
               {{item.desktop_sub_title}}
              </h3>
              <h1  :style="{ color: item.text_color }">
              {{item.desktop_title}}
              </h1>
            </div>
            <div class="banner-right">
              <img
                :src="item.imgUrl"
              />
            </div>
          </div>
          
        </div>
        
        </div>
        
      </div>
  
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </template>
  <script>
  import Swiper from "swiper";
  export default {
    name:"swiper3D",
    data(){
      return{
        homework:[
    {
        "id": "1",
        "name": "乡村旅游",
        "desktop_sub_title": "数乡遇时光",
        "desktop_title": "背包 相机 目的地 下一站 就在远方.",
        "imgUrl": "/images/imgs/002.jpg",
        "text_color": "#ffaebd",
        "bgColor": "#2a2a2e",
        "props": "爽甜可口",
        "trademark": "富士山"
    },
    {
        "id": "2",
        "name": "茶",
        "desktop_sub_title": "吃茶吃味道，看戏看成套",
        "desktop_title": "又苦又甜的茶里 领悟到生活的本质",
        "imgUrl": "/images/imgs/tea.jpg",
        "text_color": "#2dcc9f",
        "bgColor": "#e9d41c",
        "props": "爽甜可口",
        "trademark": "富士山"
    },
    {
        "id": "3",
        "name": "玉米",
        "desktop_sub_title": "鲜食好玉米 香约甜糯糯",
        "desktop_title": "天赐长白山水 地道鲜食玉米",
        "imgUrl": "/images/imgs/neosiam.jpg",
        "text_color": "#ffaebd",
        "bgColor": "#ff5300",
        "props": "爽甜可口",
        "trademark": "富士山"
    },
    {
        "id": "4",
        "name": "郁金香",
        "desktop_sub_title": "总有一个春天,应该沉浸郁金香花海。",
        "desktop_title": "春天的主角，为春天努力增添光彩",
        "imgUrl": "/images/imgs/pexels.jpg",
        "text_color": "#6b89ff",
        "bgColor": "#e9d41c",
        "props": "爽甜可口",
        "trademark": "富士山"
    },
    {
        "id": "5",
        "name": "新疆苹果",
        "desktop_sub_title": "山东新鲜红富士苹果。",
        "desktop_title": "果园采摘。冷库 口感好 价格便宜。",
        "imgUrl": "/images/imgs/Apple.jpg",
        "text_color": "#ca1306",
        "bgColor": "#f62943",
        "props": "爽甜可口",
        "trademark": "富士山"
    },
]

      }
    },
    watch: {
      list: {
        immediate: true,
  
        handler() {
          this.$nextTick(() => {
            new Swiper(this.$refs.cur, {
              loop: true, // 循环
              
              autoplay:true,//自动播放开启
              // pagination: {
              //   el: ".swiper-pagination",
              //   clickable: true,
              // },
              
              autoplayDisableOnInteraction: false,
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
              },
            });
          });
        },
      },
    },
    //派发action获取vuex中的数据:
   
  };
  </script>
  
  <style lang="less" scoped>
  .swiperBg {
    position: absolute;
    display: block;
    width: 100%;
    height: 575px;
    background-color: orangered;
    transform-origin: 0 0;
    transform: skew(0, -8deg);
    transition: all 0.5s;
  }
  .swiper-item {
    height: 575px;
    .swiper-box {
      display: flex;
      min-width: 1200px;
      justify-content: center;
      .swiper-left {
        width: 340px;
        padding-right: 100px;
        display:flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: 100px;
        text-align: right;
      }
      h3 {
      
        font-size: 30px;
        font-weight: 900;
        position: relative;
        z-index: 9999;
        margin: 0;
        line-height: 40px;
      }
      h1 {
     
        font-size: 60px;
        font-weight: 900;
        position: relative;
        z-index: 9999;
        margin: 0;
        line-height: 70px;
      }
  
      .banner-right {
        margin-top: 45px;
        transform-origin: 0 100%;
        transform: skew(0, -8deg);
        overflow: hidden;
        border-radius: 20px;
        border-bottom-right-radius: 80px;
        img {
          transform-origin: 0 100%;
          transform: skew(0, 8deg);
          width: 700px;
          border-radius: 20px;
        }
      }
    }
  }
  /* For demo */
  .ant-carousel :deep(.slick-slide) {
    text-align: center;
    height: 160px;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }
  
  .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
    z-index: 1;
  }
  .ant-carousel :deep(.custom-slick-arrow:before) {
    display: none;
  }
  .ant-carousel :deep(.custom-slick-arrow:hover) {
    opacity: 0.5;
  }
  
  .ant-carousel :deep(.slick-slide h3) {
    color: #fff;
  }
  </style>
  